<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 8000px;
        }
        .box {
            width: 150px;
            height: 195px;
            position: fixed;
            right: 10px;
            bottom: 20px;
            display:none;
            opacity: 0;
            cursor: pointer;
        }
        img {
            position: absolute;
            top: 0;
            left: 0;
            display:none;
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="images/gotop.png" alt="" class='img1' style='display: block;'>
        <img src="images/gotop.gif" alt="" class='img2' >
    </div>
    <script src="../common.js"></script>
    <script>
        //获取元素
        var box = document.querySelector('.box');
        var img1 = document.querySelector('.img1');
        var img2 = document.querySelector('.img2');

        //注册事件
        //向下滚动到5000之后,缓慢出现
        window.onscroll = function(){
            if(window.pageYOffset >= 5000){
                box.style.display = 'block';
                animationAll(box,{opacity:1},70)
                box.onmouseenter = function(){
                    img1.style.display = 'none';
                    img2.style.display = 'block';
                }
                box.onmouseleave = function(){
                    img1.style.display = 'block';
                    img2.style.display = '';
                }
                box.onclick = function(){
                    var i = window.pageYOffset;
                    timeID = setInterval(function(){
                        i -= 10
                        window.scrollTo(0,i)
                        if(i == 0) {
                            clearInterval(timeID)
                        }
                    },1)
                }
            }else {
                animationAll(box,{opacity:0},70,function(){
                    box.style.display = 'none';
                })
            }
        }
    
    </script>
    <script src='../jquery-1.12.4.js'></script>
    <script>
        // $(function(){
        //     $(window).on('scroll',function(){
        //         if($(window).scrollTop() >= 5000){
        //             $('.box').fadeIn(1000).on('mouseenter',function(){
        //                 $('.img2').show().siblings().hide().end().on('click',function(){
        //                     $('html').stop(true,false).animate({scrollTop:0},3000)
        //                 })
        //             }).mouseleave(function(){
        //                 $('.img1').show().siblings().hide();
        //             })
        //         }else {
        //             $('.box').fadeOut(3000)
        //         }

        //     })
        // })
    </script>
</body>
</html>